import { Card as SemiCard, Button, ButtonGroup, List } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle, IconUpload, IconEdit, IconDelete, IconEyeOpened, IconSave } from "@douyinfe/semi-icons";
import { Popconfirm, Card, Space, Avatar, Row, Col, Image, Tag, Modal, message, Form, Input, Table } from "antd";
import { v4 as uuidv4 } from "uuid";
import { useModel, Outlet, history } from "umi";
import { useReactive } from "ahooks";
import { useState, useEffect } from "react";
import React from "react";
import { format } from "timeago.js";

const DiscountPackagePage = (props) => {
    const { remoteData, windowInnerHeight, UTCTimeToLocal, graphqlFetch } = useModel("global");
    const { setModalVisible, setModalTitle, setModalWidth, setModalComponent, setModalStyle } = useModel("global.modal");
    const { gatewayUrl, organizationUuid } = useModel("organization.info");
    const { routers } = useModel("routers");

    const state = useReactive({
        loading: false,
        menus: [],
        selectItem: {},
        selectMenu: null,
    });

    useEffect(() => {
        if (routers["discount_package"]) {
            let subMenus = routers["discount_package"].subMenus;
            let menus = Object.keys(subMenus).map((key) => {
                const { title } = subMenus[key];
                return { key, title };
            });
            state.menus = menus;
            let selectMenu = menus.find((item) => item.key === state.selectMenu?.key);
            !selectMenu && menus.length > 0 && (selectMenu = menus[0]);
            state.selectMenu = selectMenu;
        }
    }, [routers]);

    useEffect(() => {
        state.selectMenu?.key && history.replace("/discount_package/" + state.selectMenu.key);
    }, [state.selectMenu]);

    const cardBodyHeight = windowInnerHeight - 90 - 54 - 20;

    return (
        <div style={{ padding: 10 }}>
            <Row gutter={10}>
                <Col span={5}>
                    <SemiCard
                        title={<span style={{ lineHeight: "32px", fontSize: 15 }}>优惠套餐列表</span>}
                        headerStyle={{ padding: "10px 14px" }}
                        shadows="always"
                        bordered={false}
                        size="default"
                        bodyStyle={{ padding: 1, height: cardBodyHeight, overflow: "auto" }}
                        headerExtraContent={
                            <ButtonGroup>
                                <Button icon={<IconPlusCircle />} />
                                <Button icon={<IconRefresh />} />
                            </ButtonGroup>
                        }
                    >
                        <List
                            loading={state.loading}
                            dataSource={[0, 1, 3, 3, 3, 3, 3]}
                            renderItem={(item, index) => {
                                return (
                                    <List.Item
                                        className={`list-item ${state.selectItem?.appUuid !== item?.appUuid ? "list-item-selected" : ""}`}
                                        main={
                                            <div>
                                                <div>优惠套餐名称</div>
                                                <div>优惠套餐价格</div>
                                                <div style={{ color: "var(--semi-color-text-2)", fontSize: 12 }}>可用时间段, 上线状态，可售数量，剩余数量，已售数量</div>
                                            </div>
                                        }
                                        onClick={() => (state.selectItem = item)}
                                    />
                                );
                            }}
                        />
                    </SemiCard>
                </Col>
                <Col span={19}>
                    <SemiCard
                        title={<span style={{ lineHeight: "32px", fontSize: 15 }}>优惠套餐详情</span>}
                        headerStyle={{ padding: "10px 14px" }}
                        headerExtraContent={
                            <ButtonGroup>
                                <Button icon={<IconEyeOpened />}>优惠套餐预览</Button>
                                <Button icon={<IconDelete style={{ color: "#E91E63" }} />}>删除优惠套餐</Button>
                            </ButtonGroup>
                        }
                        bordered={false}
                        shadows="always"
                        bodyStyle={{ padding: 0, height: cardBodyHeight }}
                    >
                        <div style={{ display: "flex" }}>
                            <div style={{ padding: 1, width: 200, borderRight: "1px solid #eee", height: cardBodyHeight, overflow: "auto" }}>
                                <List
                                    loading={state.loading}
                                    dataSource={state.menus}
                                    renderItem={(item, index) => {
                                        return (
                                            <List.Item
                                                className={`list-item ${state.selectMenu?.key === item?.key ? "list-item-selected" : ""}`}
                                                main={<div>{item.title}</div>}
                                                onClick={() => (state.selectMenu = item)}
                                            />
                                        );
                                    }}
                                />
                            </div>
                            <div style={{ flex: 1, height: cardBodyHeight, overflow: "auto" }}>
                                <Outlet context={{ selectItem: state.selectItem, cardBodyHeight }} />
                            </div>
                        </div>
                    </SemiCard>
                </Col>
            </Row>
        </div>
    );
};

export default DiscountPackagePage;
